<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <!-- 节点的优点 -->
      <div>我是div</div>
      <span>我是span</span>
      <ul>
          <li>我是li 1</li>
          <li>我是li</li>
          <li>我是li</li>
          <li>我是li 4</li>
      </ul>
      <div class="demo">
          <div class="box">
              <span class="erweima">×</span>
          </div>
          
        <script>
            var ul = document.querySelector('ul');
            //firstChild 第一个子节点 不管是文本节点(空白空格)还是元素节点
            console.log(ul.firstChild);
            console.log(ul.lastChild);

            console.log(ul.firstElementChild);
            console.log(ul.lastElementChild);

            console.log(ul.children);
            console.log(ul.children[0]);//第一个元素
            console.log(ul.children[ul.children.length - 1]);//最后一个元素
        </script>
</body>
</html>